<template>
	<div>
	<!-- 	<div class="someTop windSome">
			<span>时间范围：</span>
			<input type="text" id="time1" v-model="preTime">--
			<input type="text" id="time2" v-model="overTime">
		</div>
		<div id="echart_wind" class="echart_wind echart_box_all">

		</div> -->
		<table class="wind-limit">
			<thead>
				<tr>
					<th>排名</th>
					<th>站点</th>
					<th>风速(m/s)</th>
					<th>出现时间</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in data" :key="index" v-if='item.WIN_S_Inst_Max.indexOf("-")==-1'>
					<td>{{++index}}</td>
					<td>{{item.Station_name}}</td>
					<td>{{item.WIN_S_Inst_Max | dot2num}}</td>
					<td>{{item.observtimes.slice(0,-5)}}</td>
				</tr>
				<tr v-if="data.length==0">
					<td colspan="4">暂无内容</td>
				</tr>
			</tbody>
		</table>
	</div>

</template>

<script>
import topTitle from './top'
import '../../../static/laydate/laydate.js'
import echarts from 'echarts'
export default {
  props:["msg"],
	components: {
        topTitle,
    },
	data() {
		return {
			n:1,
			title:{
				name: "极大风信息",
				time: "",
			},
			preTime:"",
			overTime:"",
			windS:[ //风速
				[0.2,"0级"],[2.5,"1级"],[3.3,"2级"],[5.4,"3级"],[7.9,"4级"],[10.7,"5级"],[13.8,"6级"],[17.1,"7级"],
				[20.7,"8级"],[24.4,"9级"],[28.4,"10级"],[32.6,"11级"],[36.9,"12级"],[41.4,"13级"],[46.1,"14级"],[50.9,"15级"],
				[56.0,"16级"],[61.2,"17级"],
			],
			data:[]

		}
	},
	methods:{
		refreshAll(){
			setTimeout(()=>{
				this.refreshEchartHeight();
				// this.charts.resize();
			},1000)
		},
        closeThis(){
            this.$emit('closep',this.msg.name)
		},
		refreshEchartHeight(){
			// //console.log($(".indexComTop")[0],$(".qop")[0],"4s6d46sdfsd")
			// var height=$(".qop")[0].clientHeight-$(".indexComTop")[0].clientHeight-$(".windSome")[0].clientHeight;

			// $(".echart_wind").css("height",height)
		},
		compare(property){
			return function(a,b){
				var value1 = a[property];
				var value2 = b[property];
				return value2 - value1;
			}
		},
		doEchart(data){
			// var data=json.DS.R;
			var x=[];
			var y1=[];
			var y2=[];
			var y3=[];
			var length=data.length>10?10:data.length;
			data=data.sort(this.compare('WIN_S_Inst_Max'));
			for(var i=0;i<length;i++){
				x.push(data[i].Station_name);
				y1.push(data[i].WIN_S_Inst_Max);
				for(var u=0;u<this.windS.length;u++){
					if(data[i].WIN_S_Inst_Max<this.windS[u][0]){
						data[i].ji=this.windS[u][1];
						break;
					}
				};
				y2.push(data[i].ji.replace("级",""));
				y3.push(data[i].observtimes.slice(0,16));
			};
			this.refreshEchartHeight();
			this.charts = echarts.init(document.getElementById("echart_wind"));
			this.charts.setOption({
				legend: [{
					show: true,
					data: ['风速',],
					left:'right',
					// top:'10%',
					// itemWidth:10,//图例的宽度
					// itemHeight:10,//图例的高度
					textStyle:{//图例文字的样式
						color:'#fff',
						fontSize:12
					}
				},{
					show: true,
					data: [ '风级'],
					left:'right',
					top:'20',
					// itemWidth:10,//图例的宽度
					// itemHeight:10,//图例的高度
					textStyle:{//图例文字的样式
						color:'#fff',
						fontSize:12
					}
				},],
			 	angleAxis: {
					type: 'category',
					data: x,
					z: 10,
					axisLabel:{
						color: '#fff',
						lineStyle: {
							color: '#fff',
						},
					},
					axisLine:{
						color: '#fff',
						lineStyle: {
							color: '#61D7DA',
						},
					},
					axisTick:{
						color: '#fff',
					},
					splitLine:{
						color: '#fff',
					},
					splitArea:{
						color: '#fff',
					}
				},
				tooltip: {
					show: true,
					formatter:function(val) {
						return "<div>"+x[val.dataIndex]+"</div>"
								+"<div><span>风速：</span><span>"+y1[val.dataIndex]+"m/s</span></div>"
								+"<div><span>风级：</span><span>"+y2[val.dataIndex]+"级</span></div>"
								+"<div><span>时间：</span><span>"+y3[val.dataIndex]+"</span></div>"
					}
				},
				radiusAxis: {
					axisLabel:{
						color: '#fff',
					},
					axisLine:{
						lineStyle: {
							color: '#fff',
						},
					},
				},
				polar: {

				},
				series: [{
						type: 'bar',
						data: y1,
						coordinateSystem: 'polar',
						name: '风速',
						// stack: 'a',
						itemStyle: {
							normal: {color: '#61D7DA'}
						},
					}, {
						type: 'bar',
						data: y2,
						coordinateSystem: 'polar',
						name: '风级',
						stack: 'a',
						barGap: '-100%',
        				z: 10,
						itemStyle: {
							normal: {color: '#B6FB4F'}
						},
					},
				],
			})
		},
		getData(){
			var url="http://10.135.118.52:8080/ZJDataCenter/api/SURF_Wea_Cbf_MUL_HOR/getSurfEleInRegionByTimeRange?"
			+"userid=aa&pwd=123&dataformat=json&elements=observtimes,WIN_S_Inst_Max,WIN_D_Inst_Max,Station_name,TOWN_NAME,Alti&"
			+"timeRange=["+this.overTime1+","+this.overTime1+"]&itemlist=F&areacodes=330600000&limitCnt=10000";
			this.$ajax({method: 'get',	url: url}).then((res)=>{
				// //console.log(res)
					// //console.log(res)
					let list = res.data.DS;
					if(list.length > 0){
						list = this.quickSort(list,'WIN_S_Inst_Max')
								this.data=list.slice(0,10);
								this.n = 1;
					}else{
						let ts = this.getTimeC(this.changeTimeShow(this.getThisTime()),-60*this.n)
						this.overTime1=this.changeTimeShow(ts);
						this.n = this.n + 1
						if(this.n == 10)
							return
						this.getData()
					}
					

                // this.doEchart(this.data)
        })
        .catch(function(err){
                //console.log(err)
        })
		},
		quickSort(arr,name){
	    if(typeof arr =="object"){
	      if(arr.length<=1)
	        return arr;
	      var i=parseInt((arr.length-1)/2);
	      var c=arr.splice(i,1)[0];
	      var left=[];
	      var right=[];
	      for(var i=0;i<arr.length;i++){
	        if(arr[i][name]&&parseFloat(arr[i][name])>parseFloat(c[name])){
	          left.push(arr[i]);
	        } else{
	          right.push(arr[i])
	        }

	      }
	      return this.quickSort(left,name).concat(c,this.quickSort(right,name));
	    }
	    return arr;
  	},

		getThisTime(){
			var date = new Date();
			var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
			var Year = date.getFullYear();
			var Mounth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
			var hour=date.getHours()>9?date.getHours():"0"+date.getHours();
			var min=date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes();
			var end=Year+"-"+Mounth+"-"+Day+" "+hour+":00";
			return end;
		},
		changeTimeShow(time){
			var end=time.slice(0,4)+time.slice(5,7)+time.slice(8,10)+time.slice(11,13)+"0000";
			return end;
		},
		getTimeC(str,idx){
			var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
			var formatedDate = str.replace(pattern, '$1/$2/$3 $4:$5:$6');
			var timeC=new Date(formatedDate);
			return this.getSexTime(timeC,idx);
		},
		getSexTime(timeC,aa){
			var date1 = timeC,
			time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
			var date2 = new Date(date1);
			date2.setMinutes(date1.getMinutes()+aa);
			var Min=date2.getMinutes()>9?date2.getMinutes():"0"+(date2.getMinutes());
			var Hour=date2.getHours()>9?date2.getHours():"0"+(date2.getHours());
			var Mounth=date2.getMonth()+1>9?date2.getMonth()+1:"0"+(date2.getMonth()+1);
			var Day=date2.getDate()>9?date2.getDate():"0"+(date2.getDate());
			var time2 = date2.getFullYear()+"-"+Mounth+"-"+Day+" "+Hour+":"+Min;
			return time2;
		},

    },
    filters: {
			dot2num:(value) => {
			  if (!value) return ''
			  value = parseFloat(value)
			  return value.toFixed(2)
			}
	},
	mounted(){
		this.$emit('refreshTop',this.title);
		laydate.render({
			elem: "#time1",
			type: "datetime",
			done: value => {
				this.preTime1=this.changeTimeShow(value);
				this.getData()
			}
		});
		laydate.render({
			elem: "#time2",
			type: "datetime",
			done: value => {
				this.overTime1=this.changeTimeShow(value);
				this.getData()
			}
		})
		this.overTime=this.getThisTime();
		this.preTime=this.getTimeC(this.changeTimeShow(this.getThisTime()),-60);
		this.overTime1=this.changeTimeShow(this.overTime)
		this.preTime1=this.changeTimeShow(this.preTime);
		this.getData()
	}
}
</script>

<style lang="less" scoped="scoped">
	// .windSome{
	// 	font-size: 12px;
	// 	input{
	// 		width: 35%;
	// 	}
	// }
	.wind-limit{
		width: 100%;
		height: 100%;
		margin-top: 10px;
		text-align: center;


		thead{
			th{
				width: 25%;
				// background-color: #BED9F4;
				padding: 10px;
				color: #fff;
				font-weight: bolder;


			}
		}
		tbody{
			td{
				padding: 5px;
			}
		}
	}
</style>
